/*eslint-disable*/
// @ts-nocheck

import { getAllMonitorData, getDemonstrateMonitorData } from '@/api/mapServices/mapData';
import {
  CallbackProperty,
  Cartesian2,
  Cartesian3,
  CustomDataSource,
  DistanceDisplayCondition,
  HeightReference,
  JulianDate,
  Math as CesiumMath,
  NearFarScalar,
  VerticalOrigin,
  Viewer,
} from '@space8/czm-plugin';

/**
 * RR：水文站
 * CZ：渠道水位站
 * HZ：涵闸站
 * DD：水闸站
 * DP：泵站
 * WQ：水质站
 * VE：视频站
 * WSK：污水排口
 * SN：枢纽
 */
const StationType = ['RR', 'CZ', 'HZ', 'DD', 'DP', 'WQ', 'VE', 'WSK', 'SN'];

function getCallBackValue() {
  let i = 0;
  return new CallbackProperty(() => {
    i += 5;
    if (i >= 360) {
      i = 0;
    }
    return CesiumMath.toRadians(i);
  }, false);
}

function getOffsetCallBackValue() {
  let offset = new Cartesian2(0, 0);
  return new CallbackProperty(() => {
    offset.y = -Math.pow(Math.abs(Math.sin(JulianDate.now().secondsOfDay)), 20) * 10;
    return offset;
  }, false);
}

export function loadStation(viewer: Viewer, type: 'all' | 'demonstrate') {
  StationType.forEach((station) => {
    const dataSource = new CustomDataSource(station);
    dataSource.show = station === 'DP';
    viewer.dataSources.add(dataSource);
  });

  const promiseData = type === 'all' ? getAllMonitorData() : getDemonstrateMonitorData();

  promiseData.then((data) => {
    data.forEach((item: any) => {
      const sttp = item.sttp;
      if (StationType.includes(sttp)) {
        addData(item, viewer.dataSources.getByName(sttp)[0], sttp);
      }
    });
  });

  function addData(item: any, dataSource: CustomDataSource, image: string) {
    if (item.lgtd && item.lttd) {
      dataSource.entities.add({
        id: item.id,
        type: 'station',
        properties: { stcd: item.stcd, sttp: item.sttp, stnm: item.stnm },
        position: Cartesian3.fromDegrees(+item.lgtd, +item.lttd),
        billboard: {
          image: 'icon/' + image + '_normal.png',
          verticalOrigin: VerticalOrigin.BOTTOM,
          pixelOffset: getOffsetCallBackValue(),
          heightReference: HeightReference.RELATIVE_TO_TERRAIN,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
          scaleByDistance: new NearFarScalar(3000, 1.0, 50000, 0.5),
        },
      });
      dataSource.entities.add({
        position: Cartesian3.fromDegrees(+item.lgtd, +item.lttd),
        billboard: {
          image: getStationLabel(item.stnm),
          verticalOrigin: VerticalOrigin.BOTTOM,
          pixelOffset: new Cartesian2(0, -90),
          distanceDisplayCondition:
            type === 'demonstrate' && item.sttp === 'DP'
              ? new DistanceDisplayCondition(0, 10000)
              : new DistanceDisplayCondition(0, 3000),
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
        },
      });
    }
  }

  function getStationLabel(word: string) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 计算文字的宽度
    ctx.font = '16px Microsoft YaHei';
    const width = ctx.measureText(word).width + 80;

    canvas.width = width;
    canvas.height = 32;

    const back_gradient = ctx.createLinearGradient(0, 0, width, 0);
    back_gradient.addColorStop(0, 'rgba(0, 40, 81, 0)');
    back_gradient.addColorStop(0.5, 'rgba(0, 40, 81, 1)');
    back_gradient.addColorStop(1, 'rgba(0, 40, 81, 0)');
    ctx.fillStyle = back_gradient;
    ctx.fillRect(0, 0, width, 32);

    const top_gradient = ctx.createLinearGradient(0, 0, width, 0);
    top_gradient.addColorStop(0, 'rgba(99, 214, 255, 0)');
    top_gradient.addColorStop(0.5, 'rgba(255, 255, 255, 1)');
    top_gradient.addColorStop(1, 'rgba(99, 214, 255, 0)');
    ctx.fillStyle = top_gradient;
    ctx.fillRect(0, 0, width, 2);
    ctx.fillRect(0, 30, width, 32);

    ctx.font = '16px Microsoft YaHei';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillStyle = 'rgba(255, 255, 255, 1)';
    ctx.fillText(word, width / 2, 17);

    return canvas.toDataURL('image/png');
  }
}
